import 'package:flutter/material.dart';
import 'package:flutter_app_demo/pages/home/home_page_view_model.dart';
import 'package:flutter_app_demo/pages/home/tab_me_page.dart';
import 'package:flutter_app_demo/pages/home/tab_one_page.dart';
import 'package:flutter_app_demo/pages/home/tab_three_page.dart';
import 'package:flutter_app_demo/pages/home/tab_two_page.dart';
import 'package:flutter_app_demo/utils/logger.dart';
import 'package:lottie/lottie.dart';
import 'package:mvvm_plus/mvvm_plus.dart';

// Created by 王亮 on 2025/2/10.
class HomePage extends ViewWidget<HomePageViewModel> {
  HomePage({super.key}) : super(builder: () => HomePageViewModel());

  final List<Widget> _tabPages = [
    TabOnePage(),
    TabTwoPage(),
    TabThreePage(),
    TabMePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: Theme(
          data: ThemeData(
            brightness: Brightness.light,
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
          ),
          child: BottomNavigationBar(
            currentIndex: viewModel.selectedIndex,
            onTap: (index) => viewModel.onItemTapped(index),
            backgroundColor: Colors.white,
            selectedItemColor: Colors.blueAccent,
            unselectedItemColor: Colors.grey,
            selectedFontSize: 12,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                  icon: TabBarLottieIcon(
                    tabLottieRes: 'lottie/shouye.json',
                    isSelected: viewModel.selectedIndex == 0,
                  ),
                  label: '首页'),
              BottomNavigationBarItem(
                  icon: TabBarLottieIcon(
                    tabLottieRes: 'lottie/zixun.json',
                    isSelected: viewModel.selectedIndex == 1,
                  ),
                  label: '资讯'),
              BottomNavigationBarItem(
                  icon: TabBarLottieIcon(
                    tabLottieRes: 'lottie/fuwu.json',
                    isSelected: viewModel.selectedIndex == 2,
                  ),
                  label: '服务'),
              BottomNavigationBarItem(
                  icon: TabBarLottieIcon(
                    tabLottieRes: 'lottie/wode.json',
                    isSelected: viewModel.selectedIndex == 3,
                  ),
                  label: '我的'),
            ],
          ),
        ),
        body: _tabPages[viewModel.selectedIndex]
        // This trailing comma makes auto-formatting nicer for build methods.
        );
  }

  Widget _buildTabBarIcon() {
    return Lottie.asset('lottie/shouye.json',
        width: 30, height: 30, fit: BoxFit.fill, repeat: false, animate: false);
  }
}

class TabBarLottieIcon extends StatefulWidget {
  final String tabLottieRes;
  final bool isSelected;

  const TabBarLottieIcon({
    super.key,
    required this.tabLottieRes,
    required this.isSelected,
  });

  @override
  State<StatefulWidget> createState() => _TabBarLottieIconState();
}

class _TabBarLottieIconState extends State<TabBarLottieIcon>
    with TickerProviderStateMixin<TabBarLottieIcon> {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this);
  }

  @override
  void didUpdateWidget(covariant TabBarLottieIcon oldWidget) {
    super.didUpdateWidget(oldWidget);
    _updated();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _updated({bool isInit = false}) {
    if (widget.isSelected) {
      if (isInit) {
        _animationController.value = 1;
      } else {
        _animationController.forward(from: 0);
      }
    } else {
      _animationController.value = 0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(widget.tabLottieRes, controller: _animationController,
        onLoaded: (composition) {
      _animationController.duration = composition.duration;
      _updated(isInit: true);
    }, width: 30, height: 30, fit: BoxFit.fill, repeat: false);
  }
}
